<template>
	<view class="content">
		<!-- 空购物车背景 -->
		<view v-if="gouwucheinfo.list<=0" class="empty">
			<view class="box1"></view>
			<view class="box2"> 您的购物车为空，快去添加心爱的商品吧！</view>
		</view>
		<!-- 购物车商品 -->
		<view class="ShopBox">
			<!-- <view v-for="data,index in cart" :key="index" class="ShopBox"> -->
			<!-- <view class="shopName" @click="GoSelect(data)" v-if="data!=null">
				<view :class="[SelectName==data.shopName ? 'Select':'NoSelect']">
				</view>
				<view class="box2"> {{data.shopName}}</view>
			</view> -->
			<view class="shangping">
				<view class="gong">
				</view>
				<view class="bianji" v-if="gouwucheinfo.list!=0" @click="clearThisCart"> 清空购物车 </view>
			</view>
			<!-- <view > -->
			<!-- <view class="feng" v-for="item,index in cartList" :key="item.id"> -->
			<view class="feng">
				<scroll-view style="width: 100%;white-space: nowrap;" scroll-x="true" scroll-with-animation="true">
					<view class="list">
						<view class="box" v-for="item,index in gouwucheinfo.list" :key='index'>
							<!-- 勾选 -->
							<!-- <view class="gouxuan"> -->
							<!-- <image src="../../static/7.png" mode=""></image> -->
							<!-- <image :src="1 ? selectedImg : unselectedImg" mode="aspectFit"
									@click="toggleSelection(index)"></image> -->
							<!-- </view> -->
							<view class="boxLeft">
								<!-- <view class="gouxuan"> -->
								<!-- <image src="../../static/350.png" mode=""></image> -->
								<!-- <image :src="1 ? selectedImg : unselectedImg" mode="aspectFit"
										@click="toggleSelection(index)"></image> -->
								<!-- </view> -->
								<!-- 图片 -->
								<image class="biaot" :src="item.picture" mode=""></image> <!-- 描述 -->
								<view class="text">
									<!-- 名称 -->
									<view class="sigle-line-text">
										{{item.goodsName}}
									</view>
									<!-- 属性 -->
									<view class="sigle-line-text2">
										{{item.specName}}
									</view>
									<!-- 价格 & 数量-->
									<view class="glance-shop-cart-items-item-pq">
										<view class="sigle-line-text3" v-if="item.price!=='0.00'">
											<text>￥&nbsp;&nbsp;</text>{{item.price}}
										</view>
										<!-- <view class="sigle-line-text3" v-if="item.attributeStr">
											<text>￥</text>{{item.attributeStr}}
										</view> -->
										<!-- 数量操作 -->
										<view class="glance-shop-cart-items-item-opt">
											<!-- 减数量 -->
											<image class="glance-shop-cart-items-item-opt-quantity-minus"
												@click="zengjiagoods(item,2)" src="../../static/155.png" mode="">
											</image>
											<!-- 数量 -->
											<view class="glance-shop-cart-items-item-opt-quantity">{{item.num}}
											</view>
											<!-- 加数量 -->
											<image class="glance-shop-cart-items-item-opt-quantity-plus"
												@click="zengjiagoods(item,1)" src="../../static/156.png" mode="">
											</image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 金额合计 -->
	</view>
	<view class="goPrice">
		<!-- <view class="im">
			<image :src="areAllSelected ?  selectedImg:  unselectedImg" mode="aspectFit" @click="toggleSelectAll">
			</image>
			<view>全选</view>
		</view> -->
		<view class="name">
			<!-- <view class="goPrice" v-if="cart.length>0"> -->
			<view>合计:</view>
			<view class="box1">￥{{gouwucheinfo.totalMoney}}</view>
			<!-- 立即下单 -->
			<button class="box2" @click="toxiadanpage">去确认</button>
		</view>
	</view>
</template>
<script>
	import {
		memberCartList,
		addcard,
		clearCart
	} from "../../request/api.js"
	export default {
		data() {
			return {
				gouwucheinfo: {
					list: [],
					chajia: 0
				},
				uid: ''
			};
		},
		onLoad(options) {
			let that = this
			that.uid = uni.getStorageSync('userInfo').id
		},
		onShow() {
			let islogin = uni.getStorageSync('token') ? true : false;
			console.log(islogin, 'ois');
			if (!islogin) {
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/my/index'
					})
				}, 1500)
			}
			this.getgouwucinfo()
		},
		methods: {
			// 获取购物车信息
			getgouwucinfo() {
				let that = this
				uni.showLoading({
					title: '加载中'
				})
				memberCartList({
					shopId: '1507610418441297922',
					memberId: uni.getStorageSync('userInfo').id
				}).then(responts => {
					console.log(responts, "获取购物车")
					if (responts.success) {
						setTimeout(function() {
							uni.hideLoading()
						})
						let lengthnum = 0
						let resobj = responts.result
						let price = 0
						let chajia = 0
						let xiadan = false
						let packPrice = 0
						let dabao = true
						for (let i = 0; i < resobj.length; i++) {
							lengthnum = lengthnum + resobj[i].num * 1
							if ((resobj[i].packFee * 1) != 0) {
								dabao = false
							}
							price = (price * 1 + (resobj[i].price * 1 + resobj[i].packFee * 1) * resobj[i].num * 1)
								.toFixed(2)
							packPrice = (packPrice * 1 + resobj[i].packFee * 1 * resobj[i].num * 1).toFixed(2)
							if (packPrice == 0) {
								packPrice = 0
							}
						}
						if (dabao && resobj.length > 0) {
							price = (price * 1 + packPrice * 1).toFixed(2)
						}
						if (resobj.length > 0) {
							// console.log(that.shopinfo, 22);
							// chajia = (that.shopinfo.shopTakeout.startFare * 1 - price * 1).toFixed(
							// 	2)
							if (chajia > 0) {
								xiadan = false
							} else {
								xiadan = true
							}
							that.gouwucheinfo = {
								totalMoney: price,
								chajia: chajia,
								xiadan: xiadan,
								lengthnum: lengthnum,
								list: resobj,
								packPrice: packPrice
							}
							console.log(that.gouwucheinfo, 'ss');
						} else {
							xiadan = false
							// chajia = that.shopinfo.shopTakeout.startFare * 1
							that.gouwucheinfo = {
								totalMoney: price,
								chajia: chajia,
								xiadan: xiadan,
								lengthnum: lengthnum,
								list: resobj,
								packPrice: 0
							}
						}
					} else {
						setTimeout(function() {
							uni.hideLoading()
						})
						if (responts.message == '用户id不能为空') {
							setTimeout(function() {
								uni.showToast({
									title: '未登录',
									icon: 'none'
								})
							})
						} else {
							setTimeout(function() {
								uni.showToast({
									title: '获取购物车信息：' + responts.message,
									icon: 'none'
								})
							})
						}
					}
				}).catch(error => {
					setTimeout(function() {
						console.log(error)
						uni.hideLoading()
					})
				})
			},
			// 去下单页面
			toxiadanpage() {
				uni.navigateTo({
					url: '/pages/classification/payment?shopid=' + '1507610418441297922'
				})
			},
			// 添加购物车
			resetGouwuc(guigeinfo, goodsinfo, num, strs, cardId) {
				let that = this
				uni.showLoading({
					title: '加载中'
				})
				console.log(guigeinfo, goodsinfo, num, strs, cardId);
				addcard({
					memberId: that.uid,
					type: num,
					goodsId: guigeinfo.id,
					goodsName: guigeinfo.name,
					packFee: guigeinfo.packFee,
					picture: guigeinfo.picture ? guigeinfo.picture : guigeinfo.picture,
					price: guigeinfo.price,
					saleNum: guigeinfo.saleNum,
					shopId: '1507610418441297922',
					specId: guigeinfo.id,
					specName: guigeinfo.name,
					stock: guigeinfo.stock,
					attributeStr: strs,
					weight: guigeinfo.weight,
					id: cardId
				}).then(responts => {
					console.log(responts, "responts")
					if (responts.success) {
						setTimeout(function() {
							uni.hideLoading()
						})
						that.getgouwucinfo()
					} else {
						setTimeout(function() {
							uni.hideLoading()
						})
						setTimeout(function() {
							uni.showToast({
								title: '添加购物车：' + responts.message,
								icon: 'none'
							})
						})
					}
				}).catch(error => {
					setTimeout(function() {
						console.log(error, "error")
						uni.hideLoading()
					})
				})
			},
			// 购物车中   执行加减购物车
			zengjiagoods(items, types) {
				let that = this
				console.log(items);
				let guigeinfo = {
					packFee: items.packFee,
					picture: items.picture,
					price: items.price,
					id: items.specId,
					name: items.specName,
					stock: items.stock,
					weight: items.weight
				}
				let goodsinfo = this.goodsInfo
				let skuDesc = items.attributeStr
				if (types == 1) {
					that.resetGouwuc(guigeinfo, goodsinfo, 1, skuDesc, items.id)
				} else {
					that.resetGouwuc(guigeinfo, goodsinfo, -1, skuDesc, items.id)
				}
			},
			clearThisCart() {
				let that = this;
				uni.showLoading({
					title: '清空中'
				})
				clearCart({
					memberId: that.uid,
					shopId: '1507610418441297922',
				}).then(res => {
					uni.hideLoading()
					if (res.success) {
						that.getgouwucinfo()
					}
				}).catch(error => {
					setTimeout(function() {
						console.log(error)
						uni.hideLoading()
					})
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.feng {
		margin-top: 20rpx;
	}

	.shangping {
		display: flex;
		justify-content: space-between;
		margin-bottom: 25rpx;
	}

	.ShopBox {
		border-radius: 20rpx;
		padding-bottom: 180rpx;

		// margin: 20rpx;
		// background-color: #fff;
		.shopName {
			padding: 20rpx 0 0 17rpx;
			display: flex;

			.box2 {
				padding-left: 20rpx;
			}
		}
	}

	// 单行文本样式
	.sigle-line-text {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: left;
		font-size: 16px;
		height: 33.33%;
		text-align: left;
	}

	.sigle-line-text2 {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: left;
		font-size: 13px;
		height: 33.33%;
		text-align: left;
		color: #ADADAD;
		font-size: 15px;
		text-align: left;
		width: 50%;
	}

	.sigle-line-text3 {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: left;
		font-weight: 400;
		font-size: 36rpx;
		color: #FE5E25;
		text-align: left;
		width: 50%;

		text {
			font-size: 24rpx;
			color: #FE5E25;
			margin-right: -10rpx;
		}
	}

	.content {
		// width: 100%;
		min-height: 100vh;
		background-color: #F7F7F7;
		padding: 25rpx;
		// font-family: Arial, Helvetica, sans-serif;
	}

	// 滑动item 样式
	.list {
		width: 100%;
		height: 95px;
		display: flex;
		display: -webkit-flex;
		flex-flow: row nowrap;
		align-items: flex-start;
		justify-content: space-between;
		display: inline-block;
	}

	// 滑动区域内item 样式
	.box {
		display: flex;
		display: -webkit-flex;
		flex-flow: row nowrap;
		// justify-content: flex-start;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100%;

		.gouxuan {
			width: 36rpx;
			height: 36rpx;
			display: flex;
			align-items: center;
			background-color: #fafafa;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.boxLeft {
			border-radius: 20rpx;
			padding: 20rpx;
			// width: 85%;
			width: 100%;
			display: flex;
			background-color: #fff;

			.gouxuan {
				width: 36rpx;
				height: 36rpx;
				display: flex;
				align-items: center;
				background-color: #fafafa;
				margin-right: 18rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.biaot {
				height: 75px;
				width: 75px;
				line-height: 80px;
				border-radius: 20rpx;
				// padding: 10rpx 10rpx 10rpx 0;
				margin-right: 22rpx;
			}
		}
	}

	// item 勾选样式
	.boxSel {
		position: relative;
		margin: 0 auto;
		top: 43%;
	}

	// item 描述信息样式
	.text {
		width: 70%;
		height: 100%;
		display: -webkit-flex;
		flex-flow: column nowrap;
		align-items: flex-start;
		justify-content: flex-start;
	}

	// 价格和数量样式
	.glance-shop-cart-items-item-pq {
		width: 100%;
		height: 33.33%;
		display: flex;
		// display: -webkit-flex;
		// flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	// 数量操作
	.glance-shop-cart-items-item-opt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// width: 160rpx;
		height: 50rpx;
		font-size: 20px;
		margin-right: 10px;
		text-align: center;
		color: #6C6C6C;
		line-height: 100%;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;

		// 减数量
		.glance-shop-cart-items-item-opt-quantity-minus {
			// border-style: solid;
			// border-width: 1px 0px 1px 1px;
			// border-color: #E0E0E0;
			// width: 33.33%;
			// height: 80%;
			width: 46.09rpx !important;
			height: 46.09rpx !important;
		}

		// 数量
		&-quantity {
			// border-style: solid;
			// border-width: 1px 1px 1px 1px;
			// border-color: #E0E0E0;
			// width: 33.33%;
			// width: 100%;
			height: 80%;
			font-size: 20px;
			margin: 0 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		// 加数量
		.glance-shop-cart-items-item-opt-quantity-plus {
			// border-style: solid;
			// border-width: 1px 1px 1px 0;
			// border-color: #E0E0E0;
			// width: 33.33%;
			// height: 80%;
			width: 46.09rpx !important;
			height: 46.09rpx !important;
		}
	}

	// 底部汇总和订单样式
	.goPrice {
		width: 100%;
		// height: 60px;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;
		// display: -webkit-flex;
		// flex-flow: row nowrap;
		// align-items: center;
		// justify-content: flex-end;
		position: fixed;
		bottom: 100rpx;
		left: 0;

		.im {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}
		}

		// 生成订单样式
		.name {
			display: flex;
			// display: -webkit-flex;
			// flex-flow: row nowrap;
			align-items: center;
			justify-content: space-between;
			// justify-content: flex-end;
			margin-right: 24rpx;

			.box2 {
				width: 234.86rpx;
				height: 79.57rpx;
				border-radius: 20rpx;
				opacity: 1;
				background: #d73c38;
				color: #FFFFFF;
				text-align: center;
				lighting-color: 79.57rpx;
				font-size: 32rpx;
				font-weight: 700;
				margin-right: 24rpx;
				margin-left: 100rpx;
			}

			// 合计金额样式
			.box1 {
				// width: 15%;
				margin-right: 15px;
				line-height: 40px;
				font-size: 16px;
				margin-left: 10px;
				color: #f40;
			}
		}
	}

	// 合计金额样式
	.glance-shop-cart-total-cnt {
		width: 30%;
		text-align: left;
		line-height: 40px;
		font-size: 13px;
		margin-left: 15px;
	}

	// item 选择样式
	// 不勾选
	.NoSelect {
		width: 20px;
		height: 20px;
		border: solid 1px lightgray;
		border-radius: 50%;
	}

	// 勾选
	.Select {
		width: 20px;
		height: 20px;
		background-size: 20px 20px;
		background-repeat: no-repeat;
		background-image: url()
	}

	.glance-shop-cart-del {
		display: inline-block;
		width: 18%;
		height: 90px;
		background-color: red;
	}

	// 删除商品背景样式
	.glance-shop-cart-del-img {
		width: 30px;
		height: 30px;
		background-repeat: no-repeat;
		position: relative;
		top: 25%;
		transform: translateY(-50%);
		left: 50%;
		transform: translateX(-50%);
		background-image: url()
	}

	.empty {

		// 空购物车背景样式
		.box1 {
			width: 120px;
			height: 120px;
			position: relative;
			transform: translateY(-50%);
			left: 50%;
			transform: translateX(-50%);
			background-repeat: no-repeat;
			background-image: url()
		}

		.box2 {
			height: 30px;
			width: 100%;
			font-size: 15px;
			line-height: 30px;
			text-align: center;
		}
	}

	.uni-scroll-view::-webkit-scrollbar {
		display: none;
	}
</style>